import React, { useState, useTransition } from 'react'
import { Input } from 'antd'
import List from './List.tsx'

const Father: React.FC = () => {
  const [searchWord, setSearchWord] = useState<string>('')
  const [query, setQuery] = useState<string>('')
  const [pending, startTransitation] = useTransition()
  const handleChange = (e: any) => {
    setSearchWord(e.target.value)
    startTransitation(() => {
      setQuery(e.target.value)
    })
  }
  return (
    <>
      <Input value={searchWord} onChange={handleChange}/>
      {pending ? <div>loading</div> : <List query={query}/>}
    </>

  )
}
export default React.memo(Father)
